<template>
  <div class="boxss">
    <span style="font-size: 16px; font-weight: 700"> Cancer Type: </span>

    <el-select
      v-model="cancerValue"
      clearable
      @change="long"
      placeholder="Select Canccer"
      style="width: 240px"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <el-button
      @click="jump"
      size="small"
      style="margin-left: 100px; font-weight: 700"
      type="primary"
      >Link to scMetabolism</el-button
    >
    <p style="margin-top: 30px; font-size: 18px; font-weight: 700">
      Cancer Metabolic genes
    </p>

    <el-table
      v-loading="loading"
      element-loading-text="Data generation in progress..."
      empty-text="no pathway found"
      @sort-change="typeSort"
      :data="tableData.list"
      :default-sort="{prop: 'date', order: 'descending'}"
      style="width: 100%"
    >
      <el-table-column
        width="250"
        sortable="custom"
        prop="Pathway"
        label="Pathway"
      />
      <el-table-column sortable="custom" prop="Category" label="Category" />
      <el-table-column
        sortable="custom"
        prop="Set_In_set"
        label="Set / In Set"
      />
      <el-table-column sortable="custom" prop="pValue" label="pValue" />
      <el-table-column sortable="custom" prop="FDR" label="FDR" />
      <el-table-column sortable="custom" width="200" prop="Gene" label="Genes">
        <template #default="scope">
          <el-tooltip
            class="item"
            effect="dark"
            :content="scope.row.Gene"
            placement="top-start"
          >
            <div
              style="
                width: 200px;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 3;
                overflow: hidden;
                text-overflow: ellipsis;
              "
            >
              {{ scope.row.Gene }}
            </div>
          </el-tooltip>
        </template>
      </el-table-column>

      <el-table-column
        prop="Regulating_miRna"
        label="Regulating miRNA"
        width="300"
      >
        <template #default="scope">
          <el-tooltip
            class="item"
            effect="dark"
            :content="scope.row.Regulating_miRna"
            placement="top-start"
          >
            <div
              style="
                width: 280px;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 3;
                overflow: hidden;
                text-overflow: ellipsis;
              "
            >
              {{ scope.row.Regulating_miRna }}
            </div>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

    <div
      style="
        text-align: center;
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 10px;
      "
    >
      <el-pagination
        v-model:current-page="Search.CancerType.pageNo"
        v-model:page-size="Search.CancerType.pageSize"
        :page-sizes="[2, 5, 10, 20, 30, 50]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="Search.CancerTotal"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <Metabolites ref="chid" :cancerValue="cancerValue" />
  </div>
</template>

<script setup>
import {ref, onMounted, reactive, onUpdated} from "vue";
import {useRouter, useRoute} from "vue-router";
import {useCounterStore} from "../../pina/index";
import Metabolites from "./Metabolites.vue";
import {getSearch, gettsv} from "../../api/index";
import {jcancerType} from "../dta/cancerTye";
import Papa from "papaparse";

const router = useRouter();
const store = useCounterStore();

let cancerValue = ref("");
const jump = () => {
  store.incremenbiao("scMetabolism");
  router.push({name: "scMetabolism"});
};

const long = (e) => {
  shaixuan();
  cancerValue.value = e;
  setTimeout(() => {
    chid.value.shaixuan(cancerValue.value);
  });

  window.sessionStorage.setItem("cancerType", cancerValue.value);
};
const options = jcancerType;
let chid = ref();
let tableData = reactive({list: []});
const Search = reactive({
  CancerType: {
    sortField: "pathway",
    pageSize: 10,
    pageNo: 1,
    sortDesc: "desc",
    cancerType: "",
  },
  CancerTotal: 0,
});
let zongData = [];
let loading = ref(false);
const getdata = async () => {
  loading.value = true;
  gettsv("/Static/Cancer Metabolic Gens.tsv").then((res) => {
    Papa.parse(res, {
      header: true, // 指定第一行为标题行
      dynamicTyping: true, // 自动转换数据类型
      complete: function (results) {
        // 处理解析完成的结果

        zongData = results.data;

        tableData.list = zongData.slice(0, 10);
        Search.CancerTotal = results.data.length;
        // 这里可以将 data 传递给其他函数或者保存到状态中
      },
    });
    loading.value = false;
  });
  // 不能删
  // Search.CancerType.cancerType = cancerValue.value;
  // loading.value = true;
  // const {data} = await getSearch(Search.CancerType);
  // tableData.list = data.dataList;
  // Search.CancerTotal = data.total;
  // loading.value = false;
};
// CancerType: {
//     sortField: "pathway",
//     pageSize: 10,
//     pageNo: 1,
//     sortDesc: "desc",
//     cancerType: "",
//   },
const shaixuan = () => {
  // tableData.list = zongData.slice(0, 10);
  let a = [];
  if (cancerValue.value) {
    a = zongData.filter((item) => {
      return item.Cancer == cancerValue.value;
    });
  } else {
    a = zongData;
  }
  Search.CancerTotal = a.length - 1;
  let b = [];
  if (Search.CancerType.pageNo == 1) {
    b = a.slice(0, Search.CancerType.pageSize);
  } else {
    let num = Search.CancerType.pageSize * (Search.CancerType.pageNo - 1);

    let numa = Search.CancerType.pageSize;

    b = a.slice(num, num + numa);
  }
  tableData.list = b;
};

const handleSizeChange = (e) => {
  shaixuan();
};
const handleCurrentChange = (e) => {
  shaixuan();
};
const typeSort = (e) => {
  let da = e.prop;
  if (e.order == "descending") {
    e.order = "desc";
  }
  if (e.order == "ascending") {
    e.order = "asc";
  }

  zongData.sort((a, b) => {
    let modifier = 1;
    if (e.order === "desc") modifier = -1;

    if (a[e.prop] < b[e.prop]) return -1 * modifier;
    if (a[e.prop] > b[e.prop]) return 1 * modifier;
    return 0;
    // return e.order == "desc"
    //   ? b[`${da}`] - a[`${da}`]
    //   : a[`${da}`] - b[`${da}`];
  });

  shaixuan();
  Search.CancerType.sortField = e.prop;
  Search.CancerType.sortDesc = e.order;
  // getdata();
};

getdata();
</script>

<style></style>
